<template>
  <div id="vmleft">
    <VmPanel>
      <template #panelcontent>
        <i>新增确诊TOP10</i>
        <div class="chart topteninfected"></div>
      </template>
    </VmPanel>
    <VmPanel>
      <template #panelcontent>
        <i>大洲感染总人数趋势图</i>
        <div class="chart infectedstates"></div>
      </template>
    </VmPanel>
    <VmPanel>
      <template #panelcontent>
        <i>大洲感染人数饼状图</i>
        <div class="chart infectedstatesPie"></div>
      </template>
    </VmPanel>
  </div>
</template>

<script  setup>
import * as echarts from 'echarts'
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import $ from 'jquery'
import VmPanel from './common/VmPanel.vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter
const route = useRoute
const store = useStore
const data = reactive({
  list: {},
  cha1nation: [],
  cha1addConfirm: [],
  cha2date: [],
  cha2nowConfirm: [],
  cha2statis: [],
  cha3continent: [],
  cha3nowConfirm: [],
  datas: []
})
const arr1 = []
const arr2 = []
const arr3 = []
const arr4 = []
const arr5 = []
const dateList = []
  onMounted(() => {
    // 封装jquery ajax请求
    if (data.cha1addConfirm.length == 0) {
      $.ajax({
        url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
        dataType: 'jsonp',
        success: function (res) {
          // console.log(JSON.parse(res.data))
          data.list = JSON.parse(res.data)
          //左1
          // console.log(data.list.countryAddConfirmRankList,52);
          data.list.countryAddConfirmRankList.forEach((item) => {
            data.cha1nation.push(item.nation)
            data.cha1addConfirm.push(item.addConfirm)
          })
          renderEch1()
          // 左2
          data.list.continentStatis.forEach((item) => {
   
            console.log(item)
            dateList.push(item.date)
            if (item.statis.亚洲) {
              arr1.push(item.statis.亚洲)
            } else {
              arr1.push(arr1[arr1.length - 1])
            }
            if (item.statis.北美洲) {
              arr2.push(item.statis.北美洲)
            } else {
              arr2.push(arr2[arr2.length - 1])
            }
            if (item.statis.大洋洲) {
              arr3.push(item.statis.大洋洲)
            } else {
              arr3.push(arr3[arr3.length - 1])
            }
            if (item.statis.欧洲) {
              arr4.push(item.statis.欧洲)
            } else {
              arr4.push(arr4[arr4.length - 1])
            }
            if (item.statis.其他) {
              arr5.push(item.statis.其他)
            } else {
              arr5.push(arr5[arr5.length - 1])
            }
          })
          renderEch2()
          console.log(data.list.continentStatis[data.list.continentStatis.length - 1], 666)
          for (let i in data.list.continentStatis[data.list.continentStatis.length - 1].statis) {
            data.cha3continent.push({
              name: i,
              value: data.list.continentStatis[data.list.continentStatis.length - 1].statis[i]
            })
          }
          renderEch3()
        }
      })
    }
    function renderEch1() {
      var myChart1 = echarts.init(document.querySelector('.topteninfected'))
      myChart1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          right: '3%',
          left: '15%',
          bottom: '20%'
        },
        xAxis: [
          {
            type: 'category',
            data: data.cha1nation,
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.12)',
                opacity: 0.2
              }
            },
            axisLabel: {
              margin: 10,
              color: '#e2e9ff',
              textStyle: {
                fontSize: 14
              }
            }
          }
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.12)'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: data.cha1addConfirm,
            barWidth: '15px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4
              }
            }
          }
        ]
      })
    }
    function renderEch2() {
      var myChart2 = echarts.init(document.querySelector('.infectedstates'))
      

      myChart2.setOption({
         tooltip: {
   trigger: "axis",
  },
  legend: {
   textStyle: {
    color: "#4c9bfd",
   },
   right: "10%",
  },
  grid: {
   top: "30%",
   left: "0%",
   right: "4%",
   bottom: "3%",
   show: true, // 显示边框
   borderColor: "#012f4a", // 边框颜色
   containLabel: true,
  },
  // toolbox: {
  //  feature: {
  //   saveAsImage: {},
  //  },
  // },
  xAxis: {
   type: "category",
   boundaryGap: false,
   data: dateList,
   axisTick: {
    show: false, // 去除刻度线
   },
   axisLabel: {
    color: "#4c9bfd", // 文本颜色
   },
   axisLine: {
    show: false, // 去除轴线
   },
  },
  yAxis: {
   type: "value",
   axisTick: {
    show: false, // 去除刻度线
   },
   axisLabel: {
    color: "#fff", // 文本颜色
   },
   axisLine: {
    show: false, // 去除轴线
   },
   splitLine: {
    lineStyle: {
     color: "#012f4a", // 分割线颜色
    },
   },
  },
  series: [
   {
    name: "亚洲",
    type: "line",
    smooth: true,
    // stack: "Total",
    data: arr1,
   },
   {
    name: "北美洲",
    type: "line",
    // stack: "Total",
    smooth: true,
    data: arr2,
   },
   {
    name: "大洋洲",
    type: "line",
    smooth: true,
    // stack: "Total",
    data: arr3,
   },
   {
    name: "欧洲",
    type: "line",
    // stack: "Total",
    smooth: true,
    data: arr4,
   },
   {
    name: "其他",
    type: "line",
    // stack: "Total",
    smooth: true,
    data: arr5,
   },
  ],
      })
    }

    function renderEch3() {
      var myChart3 = echarts.init(document.querySelector('.infectedstatesPie'))

      myChart3.setOption({
        tooltip: {
          trigger: 'item'
        },
        grid: {
          top: '15%'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            name: data.cha3continent,
            type: 'pie',
            radius: ['30%', '60%'],
            // avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 10,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },

            data: data.cha3continent
          }
        ]
      })
    }

    window.addEventListener(
      'resize',
      function () {
        myChart1.resize()
        myChart2.resize()
        myChart3.resize()
      },
      false
    )
  })
</script>

<style scoped lang='scss'>
i {
  font-style: normal;
  font-size: 25px;
  letter-spacing: 2px;
}
.chart {
  width: 520px;
  height: 300px;
}
</style>